import { Typography } from '@mui/material';
import { Box } from '@mui/system';
import React, { useEffect, useState } from 'react';

import { TopMemberResponse } from '../../api/member/member';
import MemberManager from '../../api/member/member-manager';

export const TopScholars = () => {
    const [items, setItems] = useState<TopMemberResponse[]>([]);

    async function getItem() {
        const res = await MemberManager.getTop();
        setItems(res.members);
    }

    useEffect(() => {
        getItem().then();
    }, []);

    return (
        <>
            {items.length ? (
                <Box sx={{ pt: 7 }}>
                    <Typography variant="h4" sx={{ color: '#BCB6E9', pb: 2 }}>
                        Top Scholars
                    </Typography>
                    {items.map((item) => (
                        <Box
                            key={item.member.id}
                            className="d-flex align-items-center"
                            sx={{
                                background: '#13112A',
                                border: '1px solid rgba(154, 146, 223, 0.85)',
                                borderRadius: '12px',
                                p: 3,
                                mb: 2
                            }}
                        >
                            <Box
                                component="img"
                                sx={{
                                    height: 50,
                                    width: 50,
                                    mr: 2,
                                    ml: 1
                                }}
                                alt="Icon"
                                src={`/member.png`}
                            />
                            <Box>
                                <Typography
                                    variant="subtitle2"
                                    sx={{ color: '#FFBB59', wordBreak: 'break-word' }}
                                >
                                    {item.organization.name}
                                </Typography>
                                <Typography variant="h4" sx={{ wordBreak: 'break-word' }}>
                                    {item.member.name}
                                </Typography>
                                <Typography
                                    variant="subtitle2"
                                    sx={{ color: '#BCB6E9', fontSize: 12, wordBreak: 'break-word' }}
                                >
                                    SLP Earned: {item.slp}
                                </Typography>
                            </Box>
                        </Box>
                    ))}
                </Box>
            ) : (
                <></>
            )}
        </>
    );
};
